<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.css">
    <script src="./static/bootstrap/js/bootstrap.js"></script>
    <!---->
    <link rel="stylesheet" href="./static/bootstrap-table/bootstrap-table.css">
    <script src="./static/bootstrap-table/bootstrap-table.js"></script>
    <script src="./static/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!---->
    <script src="./static/jquery/jquery-3.6.0.js"></script>
    <!---->
    <link href="./static/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
    <script src="./static/bootstrap3-editable/js/bootstrap-editable.js"></script>
</head>
<body>
<a href="#" id="username">用户名</a>
<script type="text/javascript">
    $(function () {
        $('#username').editable({
            type: "text",                //编辑框的类型。支持text|textarea|select|date|checklist等
            title: "用户名",              //编辑框的标题
            disabled: false,             //是否禁用编辑
            emptytext: "空文本",          //空值的默认文本
            mode: "inline",              //编辑框的模式：支持popup和inline两种模式，默认是popup
            validate: function (value) { //字段验证
                if (!$.trim(value)) {
                    return '不能为空';
                }
            }
        });

    });
</script>
</body>
</html>